<template>
  <div class="login">
    <header class="login-header">
      <img src="../assets/images/logo.png"/>
      <h1>Vue3 by ElementPlus项目：后台管理系统</h1>
    </header>
    <section class="login-content">
      <h2>用户登录</h2>
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          status-icon
          :rules="rules"
          label-width="100px"
          class="login-form">
        <el-form-item label="登录名：" prop="account">
          <el-input size="large" v-model="ruleForm.account" type="text" clearable :prefix-icon="User"
                    placeholder="请输入登录名"/>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input size="large" v-model="ruleForm.password" type="password" clearable :prefix-icon="View"
                    placeholder="请输入密码"
                    show-password
                    autocomplete="off"/>
        </el-form-item>
        <el-form-item>
          <el-button size="large" type="primary" @click="submitForm(ruleFormRef)" class="login-form-button ">登录
          </el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import type {FormInstance} from 'element-plus'
import {User, View} from '@element-plus/icons-vue'

export default defineComponent({
  name: "Login",
  setup() {
    const ruleForm = reactive({
      account: '',
      password: ''
    })
    const $router = useRouter()
    const ruleFormRef = ref<FormInstance>()
    const rules = reactive({
      password: [{required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 8, message: '请输入6~8位密码！', trigger: 'blur'},],
      account: [{required: true, message: '请输入登录名！', trigger: 'blur'}]
    })
    const submitForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          $router.push('/Index');
        } else {
          return false
        }
      })
    }
    return {
      ruleFormRef,
      rules,
      ruleForm,
      User,
      View,
      submitForm
    }
  }
})
</script>

<style lang="scss" scoped>

.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/login.jpeg");
  background-size: 100% 100%;
  position: relative;

  .login-header {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 80px;
    //line-height: 80px;
    background-color: rgba(0, 0, 0, 0.3);
    padding-left: 20px;

    img {
      width: 60px;
      margin-right: 10px;
    }

    h1 {
      margin: 0;
      color: #fff;
      font-size: 30px;
    }
  }

  .login-content {
    position: absolute;
    width: 600px;
    height: 400px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.9);
    left: 50%;
    top: 50%;
    padding: 20px 80px;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-flow: column nowrap;

    h2 {
      height: 40px;
      line-height: 40px;
      font-size: 30px;
      text-align: center;
      font-weight: bold;
    }

    .login-form {
      display: flex;
      flex-flow: column nowrap;
      justify-content: space-around;
      height: calc(100% - 40px);


      .login-form-forgot {
        float: right;
      }

      .ant-col-rtl .login-form-forgot {
        float: left;
      }

      .login-form-button {
        width: 100%;
      }
    }
  }
}
</style>